<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .item {
        width: 100px;
        height: 50px;
        background-color: orange;
        text-align: center;
        line-height: 50px;
    }
    .item:hover{
        cursor: pointer;
    }

    .contain {
        margin-top: 50px;
        width: 400px;
        height: 400px;
        border: 1px solid red;
    }
</style>

<body>
    <div class="item" draggable="true">可拖拽</div>
    <div class="contain"></div>
</body>
<script>
    const item = document.querySelector('.item')
    const contain = document.querySelector('.contain')
    // item.addEventListener('dragstart', function () {
    //     console.log('元素开始拖动了');
    // })

    // item.addEventListener('drag', function () {
    //     console.log('元素正在拖动');
    // })

    // item.addEventListener('dragend', function () {
    //     console.log('元素拖动结束');
    // })

    contain.ondragenter = function () {
        console.log('进入目标元素范围');
    }

    contain.ondragover = function (e) {
        e.preventDefault()
        console.log('在目标元素中拖动');
    }

    contain.ondragleave = function () {
        console.log('离开目标元素');
    }

    contain.ondrop = function () {
        console.log('释放鼠标');
    }
</script>

</html>